import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";

import {
  decrement,
  increment,
  // incrementByAmount,
  incrementAsync,
  // selectCount,
} from "../redux/count_reducer";

export default function Counter() {
  // const count = useSelector(selectCount);
  const count = useSelector((state) => state.count.value);
  const dispatch = useDispatch();
  // const [incrementAmount, setIncrementAmount] = useState("2");

  return (
    <div>
      <h2>{count}</h2>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          +
        </button>

        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
        <button
          aria-label="异步加"
          onClick={() => dispatch(incrementAsync(10))}
        >
          异步加
        </button>
      </div>
      {/* 这里省略了额外的 render 代码 */}
    </div>
  );
}
